<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<div class="section section-margin mt-0 position-relative" th:fragment="seckill">
    <div class="container">
        <div style="width: 100%;text-align: center;font-size: 22px;color: black;font-weight: bold">秒杀专场</div>
        <!-- Products Tab Start -->
        <div class="col-lg-12">
            <div class=""
                 style="width: 181px !important;position: relative;float: left;background-image:url('assets/images/seckill.png');background-size: 100% 260px;height: 260px">
                <span id="sec-pre"
                      style="cursor: pointer;z-index: 10;opacity: 0.4;position: absolute;left: 100%;top: 110px;display: block;background-color: black;color: white;padding-left: 10px;font-size:22px;width: 29px;height: 35px;border-radius: 0px  20px 20px 0px;">
                   &lt; </span>
                <div class=" text-center"
                     style="height: 90px;width: 100%;color:white;font-size: 24px;margin-top: 40px;">
                    秒杀
                </div>
                <div class="text-center" style="overflow: hidden;height: 100px;margin-top: 30px">
                    <div style="padding-top: 10px;font-weight: bold;color: white;font-size: 18px">
                        <span id="sectime">已结束</span>
                    </div>
                    <div style="padding-top: 10px;color: white;font-size: 18px;font-weight: bold;">
                        <span style=";display: inline-block;width:32px;height:32px;background-color: rgb(3,177,193)"
                              id="sechour">00</span>
                        :
                        <span style="display: inline-block;width:32px;height:32px;background-color: rgb(3,177,193)"
                              id="secmin">00</span>
                        :
                        <span style="display: inline-block;width:32px;height:32px;background-color:  rgb(3,177,193)"
                              id="secsce">00</span>
                    </div>
                </div>

            </div>
            <div id="sec-kill-box" class=""
                 style=";float:left;background-color: #eae5e5;width: 66.66%;overflow: hidden;height: 260px;position: relative">
                <div id=" " style="width: 18000px;left: -363px;position: relative;height: 100%">

                    <div th:each="sl,status:${secList}"
                         th:if="${sl.product!=null}"
                         th:style="${status.index==0?'width:0px;':'width:181.5px;'}+'overflow: hidden;float: left;height: 100%;;display: inline-block'" class="ts"
                         >
                        <a th:href="@{'ywt-product?id='+${sl.product.id}}">
                        <div style="padding:5px;background-color: #e5e5e5">
                            <div style="height: 150px;overflow: hidden;background-color: white">
                                <img th:src="${sl.product.pic}" width="170px" style="padding: 8px 15px" alt="">
                            </div>
                            <div class="text-center" style="height: 100px;padding-top: 20px;background-color: white">
                                <div th:text="${sl.product.name}"
                                     style="height: 30px;padding: 0px 10px;font-size: 18px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis">
                                    Dinosaur Toys for Baby
                                </div>
                                <div th:text="'￥'+${sl.product.promotionPrice}"
                                     style="height: 50px;font-size: 18px;color: red">
                                    ￥00.0
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="col-lg-2" style="float: left; height: 260px;position: relative">
                <span id="sec-next"
                      style="cursor: pointer;opacity: 0.4;position: absolute;left: -29px;top: 110px;display: block;background-color: black;color: white;padding-left: 10px;font-size:22px;width: 29px;height: 35px;border-radius: 20px 0px 0px 20px;">
                   &gt; </span>
                <div class="text-center" style="height:50%;">
                    <img width="100%" src="assets/images/brand-logo/5.png" alt="">
                </div>
                <div style="text-align: center;height: 50%;padding-top: 20px;background: linear-gradient(180deg,#ffffff80,#dce0ec80);">
                    <div th:text="${secitem.title}" style="font-size: 18px"></div>
                    <div th:text="${secitem.title}" style="font-size: 20px;font-weight: bold"></div>
                    <div style="width:80px;height: 26px;padding: 0px 5px;border-radius: 50px;margin:0 auto;color: red;border:1px solid red">
                        <a style="" th:href="@{secList}">品类秒杀&gt;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery-3.6.1.js"></script>
    <script>
        let sec = true, clicknum = 0, cursec = 0, secTime = [];
        $(function () {
            $.ajax({
                url: "secTime",
                type: "get",
                success: function (data) {
                    for (let i = 0; i < data.length; i++) {
                        secTime.push(data[i])
                    }
                }
            })

        })
        setInterval(function () {
            if (secTime.length <= 0) {
                return;
            }
            let time = new Date()
            let h = time.getHours()
            let m = time.getMinutes()
            let s = time.getSeconds()
            if (secTime.length > 0) {
                let i = 0
                for (i = secTime.length - 1; i >= 0; i--) {
                    let startTime = parseInt(secTime[i].startTime.split(":")[0])
                    let endTime = parseInt(secTime[i].endTime.split(":")[0])
                    if (startTime <= h && h < endTime) {
                        cursec = i
                        $("#sectime").text(secTime[i].name + "点场 距结束")
                        break;
                    }
                }
                if (i < 0) {
                    sec = false;
                } else {
                    sec = true;
                }
            }
            let oh = parseInt(secTime[cursec].endTime.split(":")[0])
            if (sec === true) {
                h = oh - 1 - h
                m = 60 - 1 - m
                s = 60 - 1 - s
                $("#sechour").text(h < 10 ? "0" + h : h)
                $("#secmin").text(m < 10 ? "0" + m : m)
                $("#secsce").text(s < 10 ? "0" + s : s)
            }
        }, 1000)
        function next() {
            let its = $("#sec-kill-box>div").children();
            let st = its[0]
            let scd = its[1]
            let ed = its[its.length - 1]
            $(scd).css("width","0px");
            setTimeout(function (){
                $(st).fadeOut("slow", function () {
                    $(ed).after($(st));
                    $(st).css("width","181.5px");
                }).fadeIn();
            },1000)
        }
        function pre() {
            let its = $("#sec-kill-box>div").children();
            let st = its[0]
            let scd = its[1]
            let ed = its[its.length - 1]
            $(st).css("width","181.5px");
            setTimeout(function (){
                $(ed).fadeOut("slow", function () {
                    $(st).before($(ed));
                    $(ed).css("width","0");
                }).fadeIn();
            },1000)
        }
        // $("#sec-next").bind("click", next())
        // $("#sec-pre").bind("click",pre() )
        function secSlide() {
            let its = $("#sec-kill-box>div").children();
            let st = its[0]
            let scd = its[1]
            let ed = its[its.length - 1]
            $(scd).css("width","0px");
            setTimeout(function (){
                $(st).fadeOut("fast", function () {
                    $(ed).after($(st));
                    $(st).css("width","181.5px");
                }).fadeIn();
            },1000)
        }
        let secslide = setInterval(secSlide,1000)
        $("#sec-box").bind("mouseenter",function (){
            clearInterval(secslide);
        })
        $("#sec-box").bind("mouseleave",function (){
            secslide = setInterval(secSlide,1000)
        })
    </script>
</div>

</html>